<template>
  <div>
    <h1>新增通用合同</h1>
    ——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
    <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
      <tr>
        <td>
          <el-form-item label="合同标题:" prop="biaoTi">
            <el-input v-model="form.biaoTi" placeholder="请输入合同标题"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="对方单位:" prop="duiFangDanWei">
            <el-input v-model="form.duiFangDanWei" placeholder="请输入对方单位"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="对方负责人:" prop="ren">
            <el-input v-model="form.ren" placeholder="请输入对方负责人"></el-input>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="合同类别:" prop="type">
            <el-input v-model="form.type" placeholder="请输入合同类别"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="签订时间:" prop="qianDinDate">
            <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.qianDinDate" style="width: 100%;">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </td>
        <td>
          <el-form-item label="经办人:" prop="jinBanRen">
            <el-input v-model="form.jinBanRen" placeholder="请输入经办人"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同金额:">
            <el-input v-model="form.jInE" placeholder="请输入合同金额"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同标的或项目说明:">
               <el-input type="textarea" v-model="form.heTongBiao" placeholder="请输入合同标的或项目说明"></el-input>
          </el-form-item>
        </td>
      </tr>
      <tr>
        <td>
          <el-form-item label="合同主要条款/变更条款:">
             <el-input type="textarea" v-model="form.tiaoKuan" placeholder="请输入合同主要条款/变更条款"></el-input>
          </el-form-item>
        </td>
      </tr>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        biaoTi: '',
        waiXieDanWei: '',
        ren: '',
        xianLu: '',
        yunJia: '',
        dunWei: '',
        jInE: '',
        jinBanRen: '',
        qianDinDate: '',
        heTongJinE: '',
        heTongBiao: '',
        tiaoKuan: '',
      },
      rules: {
        biaoTi: [
          { required: true, message: '请输入合同标题', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        duiFangDanWei: [
          { required: true, message: '请输入对方单位', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        ren: [
          { required: true, message: '请输入对方负责人', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请输入合同类别', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
        qianDinDate: [
          { required: true, message: '请输入签订时间', trigger: 'blur' },
        ],
        jinBanRen: [
          { required: true, message: '请输入经办人', trigger: 'blur' },
          { min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.Add();
        } else {
          console.log('请输入必填项!!');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    Add () {
      this.$http({
        url: "https://localhost:44357/api/Car/GenAdd",
        method: "post",
        data: this.form
      }).then((r) => {
        if (r.data != 0) {
          this.$message({
            message: '恭喜你，新增通用合同成功！',
            type: 'success'
          });
          this.$router.push("/GenSel");
        }
      })
    },
    onSubmit () {
      console.log('submit!');
    }
  }
}
</script>